<template>
  <div class="body">
    <!-- 头部 -->
    <dataHeader/>
    <!-- 类型TAB -->
    <dataTab />

    <!--数据可视化-->
    <div class="data-view">
      <div class="center-block">
        <h3 class="circular-title">数据可视化</h3>
        <ul class="data-view-ul clearfix">
          <li v-for="(item,index) in dataList" :key="index">
            <div class="echartsBox">
              <img :src="item.img" alt />
            </div>
            <div class="echartsDes">
              <h4>{{item.title}}</h4>
              <h5>{{item.name}}</h5>
              <p>
                <span v-for="(value,index) in item.tag" :key="index">{{value}}</span>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getMap } from "@/api/dataService/index";

// 组件
import dataHeader from "./header.vue";
import dataTab from "./dataTab.vue";

export default {
  name: "bodys",
  components: {
    dataTab,
    dataHeader
  },
  data() {
    return {
      date: 1495302061441,
      search: {
        tabIndex: 0,
        tabs: [
          {
            id: 0,
            tabName: "查企业",
            placeholder: "请输入企业名称或统一社会信用代码进行查询",
            url: "/dataService/company"
          },
          {
            id: 1,
            tabName: "查人员",
            placeholder: "请输入人员姓名或证件号码进行查询",
            url: "/dataService/person"
          }
          /*  {id: 2, tabName: "查项目", placeholder: "请输入项目名称或项目编号查询", url: "/dataService/project"},
            {id: 3, tabName: "查信用", placeholder: "请输入企业名称或统一社会信用代码查询", url: "???"},*/
        ],
        value: ""
      },
      hotSearch: [
        "莒南县建筑设计院",
        "朝阳市顺达水利工程设计有限公司",
        "郓城县建筑设计院"
      ],
      dataList: [
        {
          img: require("@/assets/images/demo/dem1.png"),
          title: "宏观经济分析1",
          name: "莫唯尘",
          tag: ["宏观经济", "国家经济", "国家经济"]
        },
        {
          img: require("@/assets/images/demo/dem1.png"),
          title: "宏观经济分析2",
          name: "莫唯尘",
          tag: ["宏观经济", "国家经济"]
        },
        {
          img: require("@/assets/images/demo/dem1.png"),
          title: "宏观经济分析3",
          name: "莫唯尘",
          tag: ["宏观经济", "国家经济"]
        },
        {
          img: require("@/assets/images/demo/dem1.png"),
          title: "宏观经济分析4",
          name: "莫唯尘",
          tag: ["宏观经济", "国家经济", "宏观经济"]
        },
        {
          img: require("@/assets/images/demo/dem1.png"),
          title: "宏观经济分析5",
          name: "莫唯尘",
          tag: ["宏观经济", "国家经济"]
        },
        {
          img: require("@/assets/images/demo/dem1.png"),
          title: "宏观经济分析6",
          name: "莫唯尘",
          tag: ["宏观经济", "国家经济"]
        },
        {
          img: require("@/assets/images/demo/dem1.png"),
          title: "宏观经济分析7",
          name: "莫唯尘",
          tag: ["宏观经济", "国家经济"]
        },
        {
          img: require("@/assets/images/demo/dem1.png"),
          title: "宏观经济分析8",
          name: "莫唯尘",
          tag: ["宏观经济", "国家经济"]
        }
      ]
    };
  },
  mounted() {
  },
  methods: {
    hotInput(num) {
      this.search.value = this.hotSearch[num];
    }
  }
};
</script>
